{% extends "layout.tpl" %}

{% block title %}{% endblock %}

{% block nav %}
	{% import 'nav.tpl' as nav %}
	{{nav.active('study')}}
{% endblock %}

{% block subpage %} class="g-html"{% endblock %}

{% block content %}
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">API文档</h1>
			<div class="e-mt15 f-lh22">
				<p>引入Nui.js后，Nui会被注册为一个全局对象，下面介绍一下对象的属性和方法：</p>
				{% include 'note.tpl' %}
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="load">load</h2>
			<p class="e-mt15 f-lh22">加载入口模块</p>
<script type="text/highlight" data-javascript-options>
Nui.load(id, callback?)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>id</td>
					<td>String</td>
					<td>模块id，后缀.js可以省略</td>
				</tr>
				<tr>
					<td>callback</td>
					<td>Function</td>
					<td>模块加在完毕后（包括内部依赖）回调函数，该函数接收一个参数为模块返回值的引用</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<p class="e-mt15 f-lh22">当配合打包工具使用时，会在入口模块目录生成后缀为-min.js压缩文件；如果模块中使用imports加载了样式文件，会在入口模块目录同级style目录（不存在就创建）中生成-min.css压缩文件。</p>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="use">use</h2>
			<p class="e-mt15 f-lh22">加载模块</p>
<script type="text/highlight" data-javascript-options>
Nui.use(id, callback?)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>id</td>
					<td>String</td>
					<td>模块id，后缀.js可以省略</td>
				</tr>
				<tr>
					<td>callback</td>
					<td>Function</td>
					<td>模块加在完毕后（包括内部依赖）回调函数，该函数接收一个参数为模块返回值的引用</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<p class="e-mt15 f-lh22">该方法功能和Nui.load相同，只不过在配合打包工具时不会生成合并压缩文件。</p>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="config">config</h2>
			<p class="e-mt15 f-lh22">配置模块和目录别名，以及模块版本映射</p>
<script type="text/highlight" data-javascript-options>
Nui.config(obj)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>base</td>
					<td>String</td>
					<td>设置根目录，设置后将覆盖paths中的base</td>
				</tr>
				<tr>
					<td>paths</td>
					<td>Object</td>
					<td>设置目录别名，其中base用于设置根目录</td>
				</tr>
				<tr>
					<td>alias</td>
					<td>Object</td>
					<td>设置模块别名，路径中可以通过“{目录别名}”简写路径</td>
				</tr>
				<tr>
					<td>min</td>
					<td>Boolean</td>
					<td>默认为true，是否默认加载-min.js文件</td>
				</tr>
				<tr>
					<td>maps</td>
					<td>Object</td>
					<td>设置版本映射，加载模块时会优先使用该配置中的版本号</td>
				</tr>
				<tr>
					<td>skin</td>
					<td>String</td>
					<td>设置组件皮肤</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 栗子</h3>
<script type="text/highlight" data-javascript-options>
Nui.config({
	paths:{
		base:'http://rs.axnfw.com/'
		url:'/portal/common/'
	},
	maps:{
		'{url}/page':'123456'
	}
})

Nui.load('{url}/page', function(page){
	//实际请求地址为：http://rs.axnfw.com/portal/common/page-min.js?v=123456
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="define">define</h2>
			<p class="e-mt15 f-lh22">定义模块</p>
<script type="text/highlight" data-javascript-options>
Nui.define(id?, deps?, fectory)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>id</td>
					<td>String</td>
					<td>模块id，一般不需要设置该值，在合并压缩后，会自动添加上</td>
				</tr>
				<tr>
					<td>deps</td>
					<td>Array</td>
					<td>依赖模块</td>
				</tr>
				<tr>
					<td>fectory</td>
					<td>任意类型</td>
					<td>用于编写业务逻辑和返回接口</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<div class="e-mt15 f-lh22">
				<p>一个模块就是一个js文件，一个js文件中只能使用一次Nui.define</p>
				<p>当fectory为非函数时直接当作接口返回</p>
			</div>
<script type="text/highlight" data-javascript-options>
//a.js
Nui.define(['yinjiazeng', 'liumengmei'])

//b.js
Nui.define('hello world!')

//c.js
Nui.define(['./a', './b'], function(a, b){
	console.log(a[0]) //yinjiazeng
	console.log(b) //hello world!
})
</script>
			<div class="e-mt15 f-lh22">
				<p>fectory内部提供一个属性
					<a href="#exports" class="f-corange">exports</a> 以及四个方法
					<a href="#require" class="f-corange">require</a> /
					<a href="#imports" class="f-corange">imports</a> /
					<a href="#renders" class="f-corange">renders</a> /
					<a href="#extend" class="f-corange">extend</a>通过this访问，在使用时变量名不可变。</p>
			</div>
<script type="text/highlight" data-javascript-options>
//a.js
Nui.define( function(){
	var init = function(){
		console.log('aaa')
	}

	return init
})

//b.js
Nui.define( function(){
	var init = function(){
		console.log('bbb')
	}

	this.exports = init
})

//c.js
Nui.define( function(){
	var init = function(){
		console.log('ccc')
	}

	this.exports = init

	return function(){
		console.log('hello world')
	}
})

//d.js
Nui.define(['./a', './b', './c'], function(a, b, c){
	a() //aaa
	b() //bbb
	c() //hello world
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="define_exports">exports</h2>
			<p class="e-mt15 f-lh22">导出接口，也可直接使用return导出接口，return会覆盖exports。</p>
<script type="text/highlight" data-javascript-options>
Nui.define(function(){
	this.exports.a = function(){

	}
	this.exports.b = function(){

	}

	//...

	return {
		a:function(){

		},
		b:....
	}
	
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="define_require">require</h2>
			<p class="e-mt15 f-lh22">导入js模块</p>
<script type="text/highlight" data-javascript-options>
Nui.define(function(){
	var mod = this.require(id)
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>id</td>
					<td>String</td>
					<td>模块id，文件后缀.js可省略</td>
				</tr>
				<tr>
					<td>all</td>
					<td>Boolean</td>
					<td>是否返回模块全部数据</td>
				</tr>
			</table>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="define_imports">imports</h2>
			<p class="e-mt15 f-lh22">导入css/less模块</p>
<script type="text/highlight" data-javascript-options>
Nui.define(function(){
	this.imports(id)
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>id</td>
					<td>String</td>
					<td>模块id，文件后缀.css可省略</td>
				</tr>
			</table>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="define_renders">renders</h2>
			<p class="e-mt15 f-lh22">可以直接在js中写html模版，不需要做字符串拼接处理</p>
<script type="text/highlight" data-javascript-options>
Nui.define(function(){
	this.renders({template})
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>tpl</td>
					<td>String</td>
					<td>html模版字符串</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<p class="e-mt15 f-lh22">该方法需要配合打包工具使用，会自动转换为字符串拼接方式</p>
			<p class="e-mt15 f-lh22">访问外部变量时，格式必须为\'+ 变量名 +\'</p>
<script type="text/highlight" data-javascript-options>
Nui.define(function(){	
	var data = 'haha';					
	var tpl = this.renders({
		<div>
			<p>hello world</p> 
			<p>\' + data + \'</p>
		</div>
	})
})

转换后

Nui.define(function(){	
	var data = 'haha';					
	var tpl = this.renders(
		'<div>'+
			'<p>hello world</p>'+
			'<p>' + data + '</p>'+
		'</div>'
	)
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="define_extend">extend</h2>
			<p class="e-mt15 f-lh22">模块继承</p>
<script type="text/highlight" data-javascript-options>
Nui.define(function(){
	this.extend(module, members?, inserts?)
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td rowspan="2">module</td>
					<td>String</td>
					<td>被继承模块id</td>
				</tr>
				<tr>
					<td>Object</td>
					<td>被继承模块引用</td>
				</tr>
				<tr>
					<td>members</td>
					<td>任意类型</td>
					<td>对继承模块新增或修改成员</td>
				</tr>
				<tr>
					<td rowspan="2">inserts</td>
					<td>Boolean</td>
					<td>当module为数组时，是否将members插入到module末尾</td>
				</tr>
					<td>Array</td>
					<td>在继承模块方法末尾插入代码块，[{method:'方法名', 'content':'代码块'}, ...]</td>
				</tr>
			</table>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 栗子</h3>
			<p class="e-mt15 f-lh22">有2个页面a和b，b页面比a页面多一个按钮点击事件，其它功能都完全一样</p>
<script type="text/highlight" data-javascript-options>
//a.js
Nui.define(function(){
	return {
		init:function(){
			$('#a').click(function(){
				alert('aaa')
			})
		}
	}
})

//b.js
Nui.define(function(){
	return this.extend('./a', {
		event:function(){
			$('#b').click(function(){
				alert('bbb')
			})
		}
	}, [
		method:'init',
		content:'this.event()'
	])
})
//b.js的代码实际上被转换为：
Nui.define(function(){
	return {
		init:function(){
			$('#a').click(function(){
				alert('aaa')
			})
			this.event()
		},
		event:function(){
			$('#b').click(function(){
				alert('bbb')
			})
		}
	}
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="each">each</h2>
			<p class="e-mt15 f-lh22">遍历数组或者对象</p>
<script type="text/highlight" data-javascript-options>
Nui.each(object, callback)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>object</td>
					<td>Array, Object</td>
					<td>被遍历的对象</td>
				</tr>
				<tr>
					<td>callback</td>
					<td>Function</td>
					<td>遍历回调函数，接收2个参数，第一个为value，第二个为key；若回调函数return false，则跳出循环</td>
				</tr>
			</table>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="trim">trim</h2>
			<p class="e-mt15 f-lh22">过滤字符串两端空格</p>
<script type="text/highlight" data-javascript-options>
Nui.trim(string)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>string</td>
					<td>String</td>
					<td>被过滤的字符串</td>
				</tr>
			</table>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="trimLeft">trimLeft</h2>
			<p class="e-mt15 f-lh22">过滤字符串左侧空格</p>
<script type="text/highlight" data-javascript-options>
Nui.trimLeft(string)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>string</td>
					<td>String</td>
					<td>被过滤的字符串</td>
				</tr>
			</table>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="trimRight">trimRight</h2>
			<p class="e-mt15 f-lh22">过滤字符串右侧空格</p>
<script type="text/highlight" data-javascript-options>
Nui.trimRight(string)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>string</td>
					<td>String</td>
					<td>被过滤的字符串</td>
				</tr>
			</table>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="type">type</h2>
			<p class="e-mt15 f-lh22">判断对象数据类型</p>
<script type="text/highlight" data-javascript-options>
Nui.type(object, type)
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 参数</h3>
			<table class="data e-mt15">
				<tr>
					<th width="100">参数名</th>
					<th width="150">参数类型</th>
					<th>参数说明</th>
				</tr>
				<tr>
					<td>object</td>
					<td>任意类型</td>
					<td>被判断的变量</td>
				</tr>
				<tr>
					<td>type</td>
					<td>String, Array</td>
					<td>小写类型字符串，当为数组时，匹配是否满足数组中任意一种类型</td>
				</tr>
			</table>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="unique">unique</h2>
			<p class="e-mt15 f-lh22">去重</p>
<script type="text/highlight" data-javascript-options>
Nui.unique([1,2,1,3]) //1,2,3
Nui.unique([1,2,1,3], true) //3,2,1
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="extend">extend</h2>
			<p class="e-mt15 f-lh22">扩展</p>
<script type="text/highlight" data-javascript-options>
Nui.extend({a:1}, {b:1}) //{a:1,b:2}
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="noop">noop</h2>
			<p class="e-mt15 f-lh22">空函数</p>
<script type="text/highlight" data-javascript-options>
Nui.noop //fucntion(){}
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="browser">browser</h2>
			<p class="e-mt15 f-lh22">检测浏览器内核以及版本号</p>
<script type="text/highlight" data-javascript-options>
Nui.browser.version
Nui.browser.msie
Nui.browser.webkit
Nui.browser.safari
Nui.browser.mozilla
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<p class="e-mt15 f-lh22">jQuery1.9+移除了$.browser</p>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="bsie">bsie</h2>
			<p class="e-mt15 f-lh22">检测是否是IE6/7</p>
<script type="text/highlight" data-javascript-options>
Nui.browser.bsie6
Nui.browser.bsie7
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="win">win</h2>
			<p class="e-mt15 f-lh22">返回jQuery(window)引用</p>
<script type="text/highlight" data-javascript-options>
Nui.win
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<p class="e-mt15 f-lh22">为了减小$(window)被重新包装的开销</p>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="doc">doc</h2>
			<p class="e-mt15 f-lh22">返回jQuery(document)引用</p>
<script type="text/highlight" data-javascript-options>
Nui.doc
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<p class="e-mt15 f-lh22">为了减小$(document)被重新包装的开销</p>
		</div>	
	</div>
	{% import 'sidecol.tpl' as side %}
	{{side.active('doc')}}
{% endblock %}
